<style lang="less">
    @import './login.less';
</style>

<template>
  <div>
    <div class="header clearfix">
        <div class="cw1200 clearfix">
            <div class="adLogoL">
                <a href="http://www.fudan.edu.cn">
                    <img src="../assets/logo_fd.png" alt=""/>
                </a>
                <a href="http://www.econ.fudan.edu.cn">
                    <img src="../assets/logo_soe.png" alt=""/>
                </a>
            </div>
            <div class="adLogoR">
                <a href="/" class="logoEDP">
                    <img src="../assets/logo_edp.png" alt=""/>
                </a>
            </div>
        </div>
    </div><!--  header  end -->

    <div class="adCenterBox">
        <div class="cw1200 clearfix">
            <div class="loginBox" @keydown.enter="handleSubmit">
                <div class="tit">系统登录</div>

                <Form ref="loginForm" :model="form" :rules="rules">




                <div class="adInput">
                    <div class="ins-item tr3s clearfix" v-bind:class="{on : isusername}">
                        <i class="userIco tr3s"></i>
                        <FormItem prop="userName">
                            <input class="tr3s" v-model="form.userName" placeholder="用户名" @focus="changeClass('username')" />
                        </FormItem>
                    </div>
                    <div class="ins-item tr3s clearfix" v-bind:class="{on : ispasswd}">
                        <i class="pswdIco tr3s"></i>
                        <FormItem prop="password">
                            <input class="tr3s" type="password" v-model="form.password" placeholder="用户密码" @focus="changeClass('passwd')"/>
                        </FormItem>
                    </div>
                    <div class="ins-item tr3s clearfix" v-bind:class="{on : isverifycode}">
                        <i class="pswdIco tr3s"></i>
                        <FormItem prop="validCode">
                          <Row>
                            <Col span="18">
                              <input type="text" v-model="form.validCode" placeholder="请输入验证码" @focus="changeClass('verifyCode')" @blur="checkLpicma"/>
                            </Col>
                            <Col span="6">
                              <input type="button" id="code" @click="createCode" class="verification" v-model="form.checkCode"/>
                            </Col>
                          </Row>
                        </FormItem>
                    </div>
                </div>

                <div class="intxtbox clearfix">
                    <label for="rmPswd" class="radio_label tr3s checked">
                        <input name="rmPswd" type="checkbox" id="rmPswd" value="1" checked="checked">
                        <span>记住密码</span>
                    </label>

                    <a class="fpswd_A" href="#">
                        忘记密码?
                    </a>
                </div>

                <div class="subBtn clearfix">
                    <FormItem>
                        <Button class="loginBtn tr3s" @click="handleSubmit" type="primary" long>登录</Button>
                    </FormItem>
                </div>

                </Form>

            </div><!-- loginBox  end -->
        </div>
    </div><!-- adCenterBox  end -->

    <div class="footer">
        <div class="cw1200">
            <p>
                邮箱：jiansun@fudan.edu.cn <span>|</span> 电话：021-5566 1576 <span>|</span> 手机：188 1762 2580 <span>|</span> 地址：上海市杨浦区国权路600号复旦大学经济学院807室 <span>|</span> 邮编：200433
            </p>
            <p>
                Copyright &copy; 2015  EDP All Rights Reserved.
            </p>
        </div>
    </div>
  </div>



</template>

<script>
import Cookies from 'js-cookie';
export default {
    data () {
        return {
            form: {
                userName: '',
                password: '',
                validCode : '',
                checkCode: ''
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                validCode: [
                    {required:true , message:'验证码不能为空',trigger: 'blur'}
                ]
            },
            isusername : false,
            ispasswd : false,
            isverifycode : false
        };
    },
    methods: {
        changeClass:function(fuc){
          if(fuc == 'username'){
            this.isusername = true;
            this.ispasswd = false;
            this.isverifycode = false;
          }else if(fuc == 'passwd'){
            this.isusername = false;
            this.ispasswd = true;
            this.isverifycode = false;
          }else if (fuc == 'verifyCode'){
            this.isusername = false;
            this.ispasswd = false;
            this.isverifycode = true;
          }else {
            this.isusername = false;
            this.ispasswd = false;
            this.isverifycode = false;
          }
        },
        handleSubmit () {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    if(this.checkLpicma()) {
                      this.$http.post('/school/verifyUser',{userName:this.form.userName,passWord:this.form.password}).then(res =>{
                        var data = res.data;
                        if(data.code != 0){
                          this.$Message.error(data.msg);
                        }else {
                          Cookies.set('user', this.form.userName);
                          Cookies.set('access', JSON.stringify(data.data));
                          this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
                          this.$router.push({
                            name: 'home_index'
                          });
                        }

                      });

                      if (this.form.userName === 'iview_admin') {
                        Cookies.set('access', 0);
                      } else {
                        Cookies.set('access', 1);
                      }

                    }
                }
            });
        },
        createCode(){
          let code = "";
          var codeLength = 4;//验证码的长度
          var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z');//随机数
          for(var i = 0; i < codeLength; i++) {
            //循环操作
            var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
            code += random[index];//根据索引取得随机数加到code上
          }
          this.form.checkCode = code;//把code值赋给验证码
        },
        // 失焦验证图和密码
        checkLpicma(){
          this.form.validCode.toUpperCase();//取得输入的验证码并转化为大写
          if(this.form.validCode.toUpperCase() != this.form.checkCode ) {
            //若输入的验证码与产生的验证码不一致时
            this.$Message.error('验证码输入错误!!');
            this.createCode();//刷新验证码
            this.form.validCode = '';
            return false;
          }

          return true;
        }
    },
    mounted(){
       this.createCode();
    }
};
</script>

<style>

</style>
